// 用户登录界面
<template class = "body-authorLogin">
  <div class="content-authorLogin">
    <div id="authorLoginImge">
      <el-image :src="imgUrl"></el-image>
    </div>
    <div id="loginDiv">
      <h4>账号登录</h4>
      <el-divider style="  margin-top: 10px;"></el-divider>
      <div>
        <div>
          <el-input placeholder="请输入用户名" v-model="author.username" />
        </div>
        <div style="  margin-top: 10px;">
          <el-input placeholder="请输入密码" v-model="author.rawPassword" show-password />
        </div>
        <div style="  margin-top: 10px;">
          <el-row>
            <el-col :span="15">
              <el-input placeholder="验证码(点击图片刷新)" v-model="author.verCode"></el-input>
            </el-col>
            <el-col :span="9">
              <img
                id="verCodeImage"
                ref="verCodeImage"
                @click="changeCode()"
                :src="this.GLOBAL.BASE_URL + 'userOperation/getVerPic'"
              />
            </el-col>
          </el-row>
        </div>
        <div style="  margin-top: 20px;">
          <el-button type="primary" style="width:100%" @click="login()">登录</el-button>
        </div>
        <div style="  margin-top: 20px;">
          <el-button type="primary" style="width:100%" @click="register()">注册</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5";
export default {
  data() {
    return {
      imgUrl: require("../../assets/authorLogin.png"),
      author: {
        username: "",
        password: "",
        rawPassword: "",
        verCode: "",
      },
    };
  },
  methods: {
    changeCode() {
      this.$refs.verCodeImage.src =
        this.GLOBAL.BASE_URL + "userOperation/getVerPic";
    },
    login() {
      if (this.author.username === undefined || this.author.username === "") {
        that.$message({
          message: "用户名不能为空",
          type: "warning",
        });
        return;
      }
      if (
        this.author.rawPassword === undefined ||
        this.author.rawPassword === ""
      ) {
        that.$message({
          message: "密码不能为空",
          type: "warning",
        });
        return;
      }
      if (this.author.verCode === undefined || this.author.verCode === "") {
        that.$message({
          message: "验证码不能为空",
          type: "warning",
        });
        return;
      }
      //密码md5加密传输
      this.author.password = md5(this.author.rawPassword);
      console.log(md5(this.author.password));
      this.COMMON.httpPost(
        this,
        "login",
        this.author,
        (result) => {
          if (result.result == "SUCCESS") {
            //将用户信息存储到本地
            localStorage.user = JSON.stringify(result.data || []);
            this.$cookies.set("user" ,result.data);   // return this
            debugger;
            //进入主界面
            this.$router.push({ path: "/index" });
          } else {
            this.changeCode();
            this.author.password = "";
            this.author.verCode = "";
          }
        },
        (result) => {}
      );
    },
    register() {
      this.$router.push({ path: "/authorRegister" });
    },
  },
};
</script>

<style>
.body-authorLogin {
  height: 100%;
  width: 100%;
}
.content-authorLogin {
  background-color: rgb(245, 245, 245);
  height: 100%;
  width: 100%;
  display: flex;
}
#loginDiv {
  background-color: white;
  margin: auto;
  width: 20%;
  height: 50%;
  position: relative;
  padding-top: 20px;
  padding-bottom: 50px;
  padding-left: 40px;
  padding-right: 40px;
}
#authorLoginImge {
  margin: auto;
  width: 20%;
  position: relative;
  padding-bottom: 50px;
  padding-left: 40px;
  padding-right: 40px;
}
</style>